<template>
	<n-upload
		v-if='props.fileUpLoad.enabled'
		ref='upLoadRef' v-bind='upLoadConfig'>
		<n-upload-dragger>
			<div style='margin-bottom:12px;'>
				<SvgIcon icon-type='customized' icon-class='customized-upload2'
						 height='5rem' width='5rem'/>
			</div>
			<n-text style='font-size:16px;'>
				点击或者拖动文件到该区域来上传
				<br/>
				支持取消上传，支持真实进度条
			</n-text>
		</n-upload-dragger>
	</n-upload>
	<n-list v-if='props.fileUpLoad.enabled' v-bind='listConfig'>
		<template v-slot:header>
			<div class='list-header-slot'>
				<span>待上传列表</span>
				<span class='tool-group'>
					<n-flex>
						<n-button
							text round strong
							type='warning' size='tiny'
							:bordered='false'
							@click='clearWaitForUploadFileList'>
							清空列表
						</n-button>
						<n-button
							text round strong
							type='info' size='tiny'
							:bordered='false'
							@click='submitUpload'>
							开始上传
						</n-button>
					</n-flex>
				</span>
			</div>
		</template>
		<template v-for='(item,index) in waitForUploadFileList'>
			<n-list-item>
				<n-thing content-indented>
					<template v-slot:avatar>
						<template v-if='fileExtensionList[item["fileExtension"]]'>
							<template v-if='"svg" === fileExtensionList[item["fileExtension"]]["componentType"]'>
								<SvgIcon :icon-type='fileExtensionList[item["fileExtension"]]["iconType"]'
										 :icon-class='fileExtensionList[item["fileExtension"]]["iconClass"]'
										 width='32px'
										 height='100%'
										 font-size='1rem'/>
							</template>
							<template v-else-if='"i" === fileExtensionList[item["fileExtension"]]["componentType"]'>
								<ClassIcon :icon-class='fileExtensionList[item["fileExtension"]]["iconClass"]'
										   width='32px'
										   height='100%'
										   font-size='1rem'/>
							</template>
						</template>
						<!--当遇到不清楚类型的扩展名时,使用一个特定的图标表示未知文件-->
						<template v-else>
							<template v-if='"svg" === fileExtensionList["unknown"]["componentType"]'>
								<SvgIcon :icon-type='fileExtensionList["unknown"]["iconType"]'
										 :icon-class='fileExtensionList["unknown"]["iconClass"]'
										 width='32px'
										 height='100%'
										 font-size='1rem'/>
							</template>
							<template v-else-if='"i" === fileExtensionList["unknown"]["componentType"]'>
								<ClassIcon :icon-class='fileExtensionList["unknown"]["iconClass"]'
										   width='32px'
										   height='100%'
										   font-size='1rem'/>
							</template>
						</template>
					</template>
					<template v-slot:header>
						{{ item.name }}
					</template>
					<template v-slot:header-extra>
						<ClassIcon icon-class='fa fa-close' @click='spliceRow(index)'/>
					</template>
					<template v-slot:description>
						文件大小：{{ item.size }}
					</template>
					<n-progress v-bind='progressConfig'
								:processing='item["processing"]' :percentage='item["percent"]'
								:color='item["color"]' :status='item["status"]'/>
				</n-thing>
			</n-list-item>
		</template>
	</n-list>
	<vxe-grid v-if='props.fileQuery.enabled'
			  ref='uploadFileGridRef' v-bind='gridConfig'
			  @page-change='changePage' @form-submit='queryCondition'>
		<template v-slot:toolbar_buttons>
			<!--<vxe-button
				content='预留' icon='fa fa-plus success' round/>-->
		</template>
		<template v-slot:toolbar_tools>
			<div class='vxe-custom--wrapper'>
				<n-button strong circle round
						  title='刷新' @click='initGrid'>
					<template v-slot:icon>
						<ClassIcon icon-class='fa fa-refresh'/>
					</template>
				</n-button>
			</div>
		</template>
		<template v-slot:operate='{ row }'>
			<n-button v-if='props.fileQuery.downLoad.enabled'
					  strong secondary round
					  title='下载' @click='download(row)'>
				<template v-slot:icon>
					<ClassIcon icon-class='fa fa-download'/>
				</template>
			</n-button>
			<n-button v-if='props.fileQuery.remove.enabled'
					  strong secondary round
					  title='删除' @click='remove(row)'>
				<template v-slot:icon>
					<ClassIcon icon-class='fa fa-remove'/>
				</template>
			</n-button>
		</template>
	</vxe-grid>
</template>
<script setup lang='ts'>
import { onMounted, defineAsyncComponent } from 'vue';
import { VxeGrid } from '@/config/vxe/index.ts';
import { fileExtensionList } from './fileExtensionConfig.ts';
import type {
	CommonFileUpDownLoadProps
} from '#/src/components/customComponents/fileUpLoad/modal/ModalFileUpLoadListProps.d.ts';
import useUpLoadHooks from './hooks/upLoadHooks.ts';
import useListHooks from './hooks/listHooks.ts';
import useGridHooks from './hooks/gridHooks.ts';
// 异步加载的组件
const SvgIcon = defineAsyncComponent(() => import('@/components/customComponents/icon/SvgIcon.vue'));
const ClassIcon = defineAsyncComponent(() => import('@/components/customComponents/icon/ClassIcon.vue'));
// 接收的参数
const props = defineProps<CommonFileUpDownLoadProps>();
const {
		  upLoadRef,
		  waitForUploadFileList,
		  upLoadConfig,
		  setAccept,
		  clearWaitForUploadFileList,
		  cleanData,
		  beforeUpload, submitUpload,
		  handleBeforeUpload, handleAfterUpload,
		  asyncBatchUpload,
		  spliceRow
	  } = useUpLoadHooks(props);
const { progressConfig, listConfig } = useListHooks(props);
const { gridConfig, uploadFileGridRef, initGrid, queryCondition, changePage, download, remove } = useGridHooks(props);
onMounted(async () => {
	if (props.fileQuery.enabled) {
		await initGrid();
	}
});
defineExpose({ gridConfig, setAccept, initGrid, cleanData, clearWaitForUploadFileList });
</script>
<style scoped lang='scss'>
.list-header-slot{
	padding         :0;
	margin          :0;
	border          :0;
	box-sizing      :border-box;
	height          :100%;
	width           :100%;
	display         :flex;
	flex-direction  :row;
	flex-wrap       :nowrap;
	align-content   :center;
	justify-content :space-between;
	align-items     :center;
	.tool-group{
		padding    :0;
		margin     :0;
		border     :0;
		box-sizing :border-box;
		height     :100%;
	}
}
:deep(.n-thing .n-thing-avatar){
	margin :10px 10px 10px 0;
}
</style>